<template>
  <view>
    <view id="mapContainer" style="width: 100vw; height: 60vh;"></view>
    <button @click="getCurrentLocation">获取当前位置</button>
    <button @click="startNavigation">开始导航</button>
    <button @click="routePlanning">线路规划</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new BMap.Map("mapContainer");
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    },
    // 获取当前位置
    getCurrentLocation() {
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition((r) => {
        if (geolocation.getStatus() == BMAP_STATUS_SUCCESS) {
          let mk = new BMap.Marker(r.point);
          this.map.addOverlay(mk);
          this.map.panTo(r.point);
        }
      });
    },
    // 开始导航
    startNavigation() {
      // TODO: 实现导航功能
    },
    // 线路规划
    routePlanning() {
      // TODO: 实现线路规划功能
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>